<template>
    <div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle"><svg-icon icon-class="yjbb" class="myIcon" /> 运转情况</div>
          <div class="myButtons">
            <el-button @click="handleClick('', 'add')">新增</el-button>
            <el-button @click="uploadData">批量导入</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
          <el-table-column v-if="show" type="index" label="序号" :index="indexMethod">
          </el-table-column>
          <el-table-column align="center" prop="month" label="月份" fixed="left">
          </el-table-column>
  
          <el-table-column align="center" label="主机运转情况">
            <el-table-column align="center" prop="zj_yyzxs" label="月运转小时" width="92px">
            </el-table-column>
            <el-table-column align="center" prop="zj_sbhyzxs" label="三保后运转小时" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="zj_dxhyzxs" label="大修后运转小时" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="zj_zyzxs" label="总运转小时" width="92px">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="副机运转情况">
            <el-table-column align="center" prop="fj_yyzxs" label="月运转小时" width="92px">
            </el-table-column>
            <el-table-column align="center" prop="fj_sbhyzxs" label="三保后运转小时" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="fj_dxhyzxs" label="大修后运转小时" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="fj_zyzxs" label="总运转小时" width="92px">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="完好率">
            <el-table-column align="center" prop="rlts" label="日历天数">
            </el-table-column>
            <el-table-column align="center" prop="whts" label="完好天数">
            </el-table-column>
            <el-table-column align="center" prop="whl" label="%" width="60px">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" label="利用率">
            <el-table-column align="center" prop="jhsj" label="计划时间">
            </el-table-column>
            <el-table-column align="center" prop="sjkdsj" label="实际开动时间" width="105px">
            </el-table-column>
            <el-table-column align="center" prop="lyl" label="%" width="60px">
            </el-table-column>
          </el-table-column>

          <el-table-column align="center" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row, 'check')" type="text">查看</el-button>
              <el-button @click="handleClick(scope.row, 'edit')" type="text">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination align='right'
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange" 
          :current-page="currentPage"
          :page-sizes="[1,5,10,20,30]" 
          :page-size="pageSize" 
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
  
      <!-- 弹出框 -->
      <el-dialog :title="myDialogTitle" :visible.sync="dialogFormVisible" :before-close="handleClose">
  
        <el-form :inline="true" :model="yzqkForm" :disabled="isInput" class="demo-form-inline">
          <!-- <el-divider content-position="left">基础信息</el-divider> -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="月份:">
                <el-date-picker v-model="yzqkForm.month" type="month" placeholder="选择月">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
  
          <el-divider content-position="left">主机运转情况</el-divider>
  
          <el-row>
            <el-col :span="12">
              <el-form-item label="月运转小时:">
                <el-input v-model="yzqkForm.zj_yyzxs" placeholder="请输入月运转小时"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三保后运转小时:">
                <el-input v-model="yzqkForm.zj_sbhyzxs" placeholder="请输入三保后运转小时"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="大修后运转小时:">
                <el-input v-model="yzqkForm.zj_dxhyzxs" placeholder="请输入大修后运转小时"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总运转小时:">
                <el-input v-model="yzqkForm.zj_zyzxs" placeholder="请输入总运转小时"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">副机运转情况</el-divider>
  
          <el-row>
            <el-col :span="12">
              <el-form-item label="月运转小时:">
                <el-input v-model="yzqkForm.fj_yyzxs" placeholder="请输入月运转小时"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="三保后运转小时:">
                <el-input v-model="yzqkForm.fj_sbhyzxs" placeholder="请输入三保后运转小时"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="大修后运转小时:">
                <el-input v-model="yzqkForm.fj_dxhyzxs" placeholder="请输入大修后运转小时"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总运转小时:">
                <el-input v-model="yzqkForm.fj_zyzxs" placeholder="请输入总运转小时"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">完好率</el-divider>
  
          <el-row>
            <el-col :span="12">
              <el-form-item label="日历天数:">
                <el-input v-model="yzqkForm.rlts" placeholder="请输入日历天数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="完好天数:">
                <el-input v-model="yzqkForm.whts" placeholder="请输入完好天数"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="完好率%:">
                <el-input v-model="yzqkForm.whl" placeholder="请输入完好率"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">利用率</el-divider>
  
          <el-row>
            <el-col :span="12">
              <el-form-item label="计划时间:">
                <el-input v-model="yzqkForm.jhsj" placeholder="请输入计划时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际开动时间:">
                <el-input v-model="yzqkForm.sjkdsj" placeholder="请输入实际开动时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="利用率%:">
                <el-input v-model="yzqkForm.lyl" placeholder="请输入利用率"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

  
        </el-form>
  
        <div slot="footer" class="dialog-footer" v-show="!ischeck">
          <el-button @click="close('yzqkForm')">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        // table数据
        tableData: [{
          month: '2022-02',//月
          zj_yyzxs: '7',//主机月运转小时
          zj_sbhyzxs: '1',//主机三保后运转小时
          zj_dxhyzxs: '1',//主机大修后运转小时
          zj_zyzxs: '10',//主机总运转小时
          fj_yyzxs: '2',//副机月运转小时
          fj_sbhyzxs: '1',//副机三保后运转小时
          fj_dxhyzxs: '1',//副机大修后运转小时
          fj_zyzxs: '10',//副机总运转小时
          rlts: '1',//日历天数
          whts: '1',//完好天数
          whl: '100',//完好率
          jhsj: '1',//计划时间
          sjkdsj: '1',//实际开动时间
          lyl: '100',//利用率
        }, {
          month: '2022-03',//月
          zj_yyzxs: '7',//主机月运转小时
          zj_sbhyzxs: '1',//主机三保后运转小时
          zj_dxhyzxs: '1',//主机大修后运转小时
          zj_zyzxs: '10',//主机总运转小时
          fj_yyzxs: '2',//副机月运转小时
          fj_sbhyzxs: '1',//副机三保后运转小时
          fj_dxhyzxs: '1',//副机大修后运转小时
          fj_zyzxs: '10',//副机总运转小时
          rlts: '1',//日历天数
          whts: '1',//完好天数
          whl: '100',//完好率
          jhsj: '1',//计划时间
          sjkdsj: '1',//实际开动时间
          lyl: '100',//利用率
        }],
        show:false,//隐藏序列
        //table数据总条数
        tableTotal: 30,
        //当前页码
        currentPage: 1,
        // 分页数
        pageSize: 5,
        //表单填报的数据
        yzqkForm: {
          month: '',//月
          zj_yyzxs: '',//主机月运转小时
          zj_sbhyzxs: '',//主机三保后运转小时
          zj_dxhyzxs: '',//主机大修后运转小时
          zj_zyzxs: '',//主机总运转小时
          fj_yyzxs: '',//副机月运转小时
          fj_sbhyzxs: '',//副机三保后运转小时
          fj_dxhyzxs: '',//副机大修后运转小时
          fj_zyzxs: '',//副机总运转小时
          rlts: '',//日历天数
          whts: '',//完好天数
          whl: '',//完好率
          jhsj: '',//计划时间
          sjkdsj: '',//实际开动时间
          lyl: '',//利用率
         
        },
        // 集油间下拉框的内容
        zyqOptions: [{ value: '1', label: '第 一 采油作业区' }, { value: '2', label: '第 二 采油作业区' }, { value: '3', label: '第 三 采油作业区' }, { value: '4', label: '第 四 采油作业区' }],
        groupOptions: [{ value: '1', label: '东162队' }, { value: '2', label: '东163队' }, { value: '3', label: '东164队' }, { value: '4', label: '东165队' }],
        jyjOptions: [{ value: '1', label: '1 号集油间' }, { value: '2', label: '2 号集油间' }, { value: '3', label: '3 号集油间' }, { value: '4', label: '4 号集油间' }],
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        //井号下拉框
        jhOptions: [{ value: '1', label: '树2-30' }, { value: '2', label: '树2-32' }, { value: '3', label: '树3-29' }, { value: '4', label: '树3-31' }],
        //井别下拉框
        jbOptions: [{ value: '1', label: '抽' },],
        //编辑框是否显示
        dialogFormVisible: false,
        //弹出框是否是查看
        ischeck: false,
        //控制查看时不可更改数据
        isInput:false,
        //弹出框标题
        myDialogTitle: '',
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      //关闭对话框
      handleClose(done) {      
        // 清空表单
        // this.$refs['yzqkForm'].resetFields();
        // 清空表单校验，避免再次进来会出现上次校验的记录
        // this.$refs['yzqkForm'].clearValidate();
        done();
      },
       // 弹框关闭触发
      close(formName) {
        this.dialogFormVisible = false;
        // // 清空表单
        // this.$refs[formName].resetFields();
        // // 清空表单校验，避免再次进来会出现上次校验的记录
        // this.$refs[formName].clearValidate()
      },
      handleClick(row, handle) {
        this.dialogFormVisible = true;
  
        if (handle == 'check') {
          this.myDialogTitle = '运转情况'
          this.ischeck = true
          // 1.表单禁用
          this.isInput = true;
          this.yzqkForm = row
          this.$message({ message: '成功打开', type: 'success' });
        } else if (handle == 'edit') {
          this.myDialogTitle = '运转情况编辑'
          this.ischeck = false
          this.isInput = false;
          this.yzqkForm = row
          this.$message({ message: '编辑成功', type: 'success' });
        } else if (handle == 'add') {
          this.myDialogTitle = '运转情况填报'
          this.ischeck = false
          this.isInput = false;
          this.yzqkForm ={}
          this.$message({ message: '添加成功', type: 'success' });
        }
        console.log(row);
      },
      uploadData() {
        console.log('批量导入成功')
      },
      //每页条数改变时触发 选择一页显示多少行
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.currentPage = 1;
        this.pageSize = val;
      },
      //当前页改变时触发 跳转其他页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      // 序号计算
      indexMethod (index) {
      // index默认在0开始，这里+1
        return index + 1 + (this.currentPage - 1) * this.pageSize
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: large;
    padding-left: 10px;
    margin-bottom: 16px;
    float: left;
  }
  
  //按钮组
  .myButtons {
    float: right
  }
  
  //格子的样式
  .bg-white {
    background: #ffffff;
  }
  
  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  
  .calendar ::v-deep .el-button-group::before {
    display: none;
  }
  
  .calendar ::v-deep .el-button-group::after {
    display: none;
  }
  
  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }
  
  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }

  .el-input.is-disabled ::v-deep .el-input__inner {
    color: #606266;
  }
  </style>